import { View } from "@tarojs/components";

import styles from "./index.scss";
import { Descriptions, Item } from "@/components/Descriptions";
import { useRequest } from "taro-hooks";
import {
  addZonePermission,
  delPermission,
  getZoneDetail,
  getZoneUserList,
} from "@/services/MaterialZone";
import { useRouter,showToast } from "@tarojs/taro";
import { Add, Trash } from "@nutui/icons-react-taro";
import { getUserInfo, isMeById } from "@/utils/token";
import SelectPanel from "@/components/Form/SelectPanel";
import { getFamilyUserList } from "@/services/FamilyMember";
import { useFamilyStore } from "@/model";


export default () => {
  const { family } = useFamilyStore();
  const { params } = useRouter();
  const { id: userId } = getUserInfo();
  const { id } = params;
  const { data } = useRequest(getZoneDetail, {
    defaultParams: [id],
  });
  const { data: zoneUserList, run: refreshZone } = useRequest(getZoneUserList, {
    defaultParams: [id],
  });
  const { data: familyUserList } = useRequest(
    getFamilyUserList,
    {
      defaultParams: [{ familyId: family.id as string,nickname: "" }],
    }
  );

  const { familyName, name, description, createdTime } = data || {};
  return (
    <View className={styles.container}>
      <Descriptions title="分区信息">
        <Item label="名称" content={name} />
        <Item label="家庭名称" content={familyName} />
        <Item label="创建时间" content={createdTime} />
        <Item label="描述信息" content={description} />
      </Descriptions>
      <Descriptions
        title={
          <View className={styles.op}>
            <View>分区权限用户</View>
            <SelectPanel
              multiple
              loading={false}
              replaceKey={{
                name: "nickname",
                value: "id",
              }}
              onConfirm={async(r) => {
                await addZonePermission({
                  zoneId:id as string,
                  userIds:r.map((item) => item.userId),
                })
                showToast({
                  title: "添加成功",
                  icon: "success",
                })
                refreshZone(id);
              }}
              
              buttonRender={() => <Add />}
              tip="添加权限用户"
              data={familyUserList?.filter(
                (item) => !isMeById(item.userId as string)&&!(zoneUserList?.some((i)=>i.id===item.userId))
              )}
            />
            <SelectPanel
              multiple
              loading={false}
              onConfirm={async (r) => {
                await delPermission({
                  zoneId:id as string,
                  userIds:r.map((item) => item.id),
                });
                showToast({
                  title: "删除成功",
                  icon: "success",
                })
                refreshZone(id);
              }}
              replaceKey={{
                name: "username",
                value: "id",
              }}
              buttonRender={() => <Trash />}
              tip="删除权限用户"
              data={zoneUserList?.filter(
                (item) => !isMeById(item.id as string)
              )}
            />
          </View>
        }
      >
        {zoneUserList?.map?.((item) => {
          return (
            <Item
              key={item.id}
              label={item.nickname}
              content={isMeById(item.id as string) ? "我" : ""}
            />
          );
        })}
      </Descriptions>
    </View>
  );
};
